<template>
  <div class="content-box">
    <div class="content">
      <div class="group">
        <div class="header">
          <div class="title">智能锁地图</div>
          <div class="handler">
            <div class="showCode">
              <el-switch v-model="showCode" style="--el-switch-on-color: #54bcbd" /><span class="showCodeLabel">显示编码</span>
            </div>
          </div>
        </div>
        <div class="tree">
          <ZTree :id="treeId" :zNodes="zNodes" :show-code="showCode" @click-dom="zTreeOnClick" />
        </div>
      </div>
      <div class="main">
        <div class="table-box" v-loading="loading">
          <ProTable
            ref="proTable"
            title="网关列表"
            rowKey="gatewayid"
            :columns="columns"
            :request-api="getTableList"
            :data-callback="dataCallback"
            :search-col="{ xs: 1, sm: 1, md: 1, lg: 2, xl: 2 }"
            :small="true"
            v-if="mapndxs.length"
          >
            <!-- 表格 header 按钮 -->
            <template #tableHeader>
              <el-button type="primary" text :icon="CirclePlus" @click="openDrawer('新增')">新增网关</el-button>
              <el-button type="primary" text :icon="UploadFilled" @click="dialogVisible = true">导入</el-button>
            </template>
            <!-- Expand -->
            <template #expand="scope">
              {{ scope.row }}
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
              <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
              <el-button type="primary" link :icon="Delete" @click="_delete(scope.row)">删除</el-button>
            </template>
          </ProTable>
          <GatewayDrawer ref="drawerRef" />
          <UploadDialog :dialog-visible="dialogVisible" :handle-close="handleClose" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="tsx" name="gatewayManage">
/* eslint-disable */
// @ts-nocheck
import { ref, onMounted } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import GatewayDrawer from "./components/GatewayDrawer.vue";
import UploadDialog from "./components/UploadDialog.vue";
import ZTree from "@/components/ZTree/index.vue";
import { CirclePlus, Delete, EditPen, UploadFilled } from "@element-plus/icons-vue";
import { getGatewayList, deleteGateway, addGateway, editGateway } from "@/api/modules/smartLock/manage/gatewayManage";
import { getRoomMapTree } from "@/api/modules/common";
import { getFlatMenuList } from "@/utils";
import { connectStatus } from "@/utils/serviceDict";

const treeId = ref("tree");
const loading = ref(false);
const showCode = ref(false);
const zNodes = ref([]);
const mapndx = ref("");
const mapndxs = ref([]);
const dialogVisible = ref(false);

const proTable = ref();

const dataCallback = (data: any) => {
  const { page, records } = data;
  loading.value = false;
  return {
    list: records,
    total: page.total
  };
};

const getTableList = (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  loading.value = true;
  return getGatewayList({ ...newParams, mapndxs: mapndxs.value });
};

const columns: any = [
  {
    prop: "gatewayName",
    label: "网关名称",
    search: { el: "input" },
    minWidth: 200
  },
  {
    prop: "mac",
    label: "mac地址",
    search: { el: "input" },
    minWidth: 200
  },
  {
    prop: "channel",
    label: "信道",
    search: { el: "input" },
    minWidth: 120
  },
  {
    prop: "gatewayStatus",
    label: "网关状态",
    enum: connectStatus,
    search: { el: "select" },
    minWidth: 120
  },
  {
    prop: "description",
    label: "描述",
    minWidth: 300
  },
  { prop: "operation", label: "操作", fixed: "right", width: 180 }
];

// 删除网关信息
const _delete = async params => {
  await useHandleData(deleteGateway, { gatewayId: params.gatewayId }, `删除【${params.gatewayName}】`);
  proTable.value.getTableList();
};

/**
 * 关闭上传照片弹窗
 */
const handleClose = () => {
  dialogVisible.value = false;
};

/**
 * 展开树
 */
const getFlatMapData = (list: any) => {
  let newList = JSON.parse(JSON.stringify(list));
  return newList.flatMap((item: any) => [item, ...(item.children ? getFlatMapData(item.children) : [])]);
};

/**
 * 获取锁地图树结构
 */
const getRoomMapTreeData = async () => {
  try {
    const res = await getRoomMapTree();
    zNodes.value = res.data;
  } catch (error) {
    console.log(error);
  }
};

/**
 * 点击树节点
 */
function zTreeOnClick({ treeNode, ids }) {
  mapndx.value = treeNode.id;
  mapndxs.value = ids;
  proTable.value && proTable.value.getTableList!();
}

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof GatewayDrawer> | null>(null);
const openDrawer = (title: string, row) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row, mapndx: title === "新增" ? mapndx.value : row.mapndx },
    api: title === "新增" ? addGateway : title === "编辑" ? editGateway : undefined,
    getTableList: proTable.value.getTableList,
    resetTableList: proTable.value.reset,
    zNodes: zNodes.value
  };

  drawerRef.value?.acceptParams(params);
};

onMounted(() => {
  getRoomMapTreeData();
});
</script>
<style lang="scss">
@import "./index.scss";
</style>
